<template>
  <div class="app-container">
    <Form :label-width="80">
      <Row>
        <Col span="6">
          <FormItem label="业务平台">
            <Select v-model="queryParams.businessLine" class="full-width" @on-change="search">
              <Option value="test1">业务平台1</Option>
              <Option value="test2">业务平台2</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="活动名称">
            <Input v-model.trim="queryParams.activityName" placeholder="请输入活动名称" @keyup.enter.native="search" />
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="开始日期">
            <DatePicker v-model="queryParams.startTime" transfer type="date" placement="bottom-end" placeholder="请选择开始日期" class="full-width" @on-change="search" />
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem>
            <Button type="primary" icon="ios-search" @click="search">搜索</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <Table :no-data-text="`<img class='noImgUrl' src=${noImgUrl} /><div class='noImgUrlText'>暂无数据<div>`" :loading="$wait.is('queryMarActByPage')" :columns="columns" stripe :data="tableData">
      <template slot="action" slot-scope="{ row }">
        <span class="table-action-text" @click="look(row)">查看</span>
      </template>
    </Table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { demoApi } from '@/api'
import { formatterText } from '@/utils/tableFormatter'
export default {
  name: 'ActivityManage',

  components: {},

  mixins: [],

  props: {},

  data() {
    return {
      total: 0,
      queryParams: {
        businessLine: null,
        activityName: null,
        startTime: null,
        pageNo: 1,
        pageSize: 10
      },
      columns: [
        {
          title: 'ID',
          key: 'id',
          render: formatterText('id')
        },
        {
          title: '活动名称',
          key: 'activityName',
          render: formatterText('activityName')
        },
        {
          title: '活动状态',
          key: 'activityStatusDesc',
          render: formatterText('activityStatusDesc')
        },
        {
          title: '活动类型',
          key: 'activityTypeDesc',
          width: 100,
          render: formatterText('activityTypeDesc')
        },
        {
          title: '编辑',
          slot: 'action',
          fixed: 'right',
          width: 200,
          align: 'center'
        }
      ],
      tableData: []
    }
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {
    this.search()
  },

  destroyed() {},

  methods: {
    search() {
      this.pageNo = 1
      this.getList()
    },
    /**
     * @Description: 获取活动列表
     * @author tangyuhui
     * @date 2021/5/7 12:49
     */
    getList() {
      demoApi.queryDemoPage(this.queryParams).then(this.serviceUtil.filterBmsBackendData).then(res => {
        this.total = res && res.rowTotal
        this.tableData = res && res.rows
      }).catch(err => {
        this.showError(err)
      })
    },
    /**
     * @Description:查看活动
     * @author tangyuhui
     * @date 2021/5/8 16:17
     */
    look(row) {
      this.showSuccess('查看' + row.activityName)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
